<template>
<div class="baseUser">
  <!-- 按钮 -->
    <div class="btns">
      <el-form label="实名" size="small" inline style="text-align:center">
        <el-form-item label="实名" size="small" inline>
 <el-input v-model="param.realname" placeholder="请输入内容"></el-input>
        </el-form-item>
              <el-form-item label="性别" size="small" inline>
 <el-input v-model="param.gender" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button round type="primary" size="small" icon="el-icon-search" plain @click="loadBaseUsers">搜索</el-button>
        </el-form-item>
         <div id="container" style="height: 500px"></div>
      </el-form>
         <el-button 
         round type="primary"  
         style="float:right" size="small" icon="el-icon-edit" plain @click="toAddHandler">新增</el-button>
     <el-button
        round
        plain
        style="float: right"
        type="warning"
        size="small"
        icon="el-icon-edit"
        @click="downloadHandler()"
        >导出</el-button
      >
    </div>
        <el-alert
    center
    title="用户模块"
    type="info"
    effect="dark">
  </el-alert>
     <el-divider><i class="el-icon-mobile-phone"></i></el-divider>
    <!-- /按钮 -->
    <!-- {{applications}} -->
    <!-- 表格 -->
    <el-table size="small" :data="baseUsers">
      <el-table-column type="index" :index="1" label="序号"></el-table-column>
      <el-table-column label="用户名" prop="username" align="center"></el-table-column>
      <el-table-column label="密码" prop="password" align="center"></el-table-column>
      <el-table-column label="电话" prop="telephone" align="center"></el-table-column>
      <el-table-column label="实名" prop="realname" align="center"></el-table-column>
      <el-table-column label="性别" prop="gender" align="center"></el-table-column>
      <el-table-column label="出生" prop="birth" align="center"></el-table-column>
      <el-table-column label="E-mail" prop="email" align="center"></el-table-column>
      <el-table-column label="手稿" prop="autograph" align="center" width="100px"></el-table-column>
      <el-table-column label="isFree" prop="isFree" align="center"></el-table-column>
      <el-table-column label="状态" prop="status" align="center"></el-table-column>
      <el-table-column label="用户面貌" prop="userFace" align="center" width="150px"></el-table-column>
      <el-table-column label="idCard" prop="idCard" align="center"></el-table-column>
      <el-table-column label="地址" prop="address" align="center"></el-table-column>
      <el-table-column label="本地" prop="nation" align="center"></el-table-column>
      <el-table-column label="登记时间" prop="registerTime" align="center" sortable></el-table-column>
      <el-table-column label="介绍" prop="introduce" align="center" width="300px"></el-table-column>
       <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope" >
          <el-button type="primary" size="small" plain  round icon=" el-icon-edit" @click="editHandler(scope.row)">修改</el-button>
          <el-button type="danger" size="small" plain round icon="el-icon-delete" @click="deleteHandler(scope.row)">删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- /表格 -->
</div>

</template>

<script>
import {del,get,post} from '@/utils/request'
export default {
      // 页面数据
   // 页面数据
  data(){
    return {
      param:{
       name:""
      },
       baseUsers:[]
    }
  },
  // 页面渲染的时候会调用的函数
  created(){
    this.loadBaseUsers();
    console.log(this.$router);
  },
  mounted() {
      this.initChart();
  },
  // 所有的方法
  methods:{
    initChart(){
      var options= {
		chart: {
				type: 'pie',
				options3d: {
						enabled: true,
						alpha: 45
				}
		},
		title: {
				text: '用户管理信息统计3D饼状图'
		},
	
		plotOptions: {
				pie: {
						innerSize: 100,
						depth: 45
				}
		},
		series: [{
				name: '用户实名',
				data: [
						['技术专家1', 8],
						['技术专家2', 3],
						['超级管理员1', 1],
						['超级管理员2', 6],
						['普通用户1', 8],
						['普通用户2', 4],
						['王图图', 4],
						['刘敏', 1],
						['工作者', 1]
				]
		}]
};
var chart = Highcharts.chart('container',options);
    
    },
     downloadHandler(){
      window.location.href="http://39.106.31.187:8888/baseUser/download?name"+this.param.name
    },
    editHandler(row) {
      this.$router.push({
        path: "/user/userCreate",
        query: row
      });
    },
    deleteHandler(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let url = "http://39.106.31.187:8888/baseUser/deleteById";
        del(url, { id: row.id }).then((resp) => {
          this.$message({ type: "success", message: resp.message });
          this.loadBaseUsers();
        });
      });
    },
  toAddHandler(){
    this.$router.push("/user/userCreate")
  },
    loadBaseUsers(){
      let url = 'http://39.106.31.187:8888/baseUser/query'
      get(url,this.param).then((resp)=>{
        this.baseUsers = resp.data;
      })
    }
  }
  
}

</script>

<style scoped>

</style>
